<html>
    <head>
        <title>模板语法__指令</title>
    </head>
    <body>
        <script>
            // 指令：

                    /*
                        指令是带有 "v-" 前缀的特殊attribute.
                        指令的"值预期"是单个JavaScript表达式(v-for是个例外，稍后我们再讨论。)
                        指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用到DOM。
                    */
                        // 回顾之前看到的例子:
                            /*
                                <p v-if="seen">现在你看到我了</p>

                                这里，v-if指令将根据表达式 seen 的值得真假来插入/移除
                            */


                     // ★ 一、参数：
                            /*
                                一些指令能够接收一个"参数"，在指令名称之后以"冒号"表示。



                                eg：  v-bind 指令，可以用于响应式地更新 HTML 的 attribute

                                        <a v-bind:href="url"> ... </a>

                                        在这里href是参数，告知 v-bind 指令将该元素的href attribute与表达式 url的值绑定。



                                 eg: 另一个例子是 v-on 指令，它用于监听DOM事件：
                                        <a v-on:click="doSomething">...</a>

                                        这里参数是监听的事件名。我们也会更详细地讨论事件处理。
                            */


                    // ★ 二、动态参数：
                            // ①、概念用法
                                    /*
                                        从2.6.0起，可以用 "[]"括起来的表达式作为一个指令的参数：
                                            
                                            eg:    注意,参数表达式的写法存在一些约束，如之后的"对动态参数表达式的约束" 一节所述.

                                                <a v-bind:[attributeName]="url">...</a>

                                            这里的 "attributeName" 会被作为一个JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。
                                            例如，如果你的Vue实例有一个 data property 名为 attributeName,其值为 "href" ，那么这个绑定将等价于: v-bind:href



                                            同样的，你可以使用动态参数为一个动态的事件名绑定处理函数：
                                                <a v-on:[eventName]="doSomething">。。。</a>
                                                在这个示例中，当eventName的值为 "focus"时，  v-on:[eventName]  等价于： v-on:focus
                                    */

                            // ②、对动态参数的"值"的约束
                                    /*
                                        动态参数的"预期"会求出一个"字符串"，异常情况下值为　null , 这个 null 值可以被显性地用于移除绑定。任何其他非字符串类型的值都会"触发警告"
                                    */

                            // ③、对动态参数"表达式"的约束
                                    /*
                                        动态参数表达式有一些语法约束，因为某些字符，如 '空格' 和 '引号' , 放在HMLT attribute名里是无效的，不合法的。
                                        

                                        eg:     这会触发一个"编译警告"
                                                <a v-bind:['foo'+bar]='value'>....<a>  //  带有引号 '' 的表达式是不被允许的

                                        变通的办法是使用没有空格或者引号的表达式，或者使用'计算属性'替代这种复杂的表达式。


                                    */
                                    /*
                                        注意：
                                            在DOM中使用模板时(直接在一个HTML文件里撰写模板)，还要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转换为小写：

                                            eg:
                                                    <a v-bind:[someAttr]="value">...</a>

                                                    在DOM中使用模板时这段代码会被转换为 'v-bind:[someattr]'.
                                                    除非在市里中有一个名为"someattr"的property,否则代码不会工作。
                                    */

                    

                    // ★ 三、修饰符：
                               /*
                                    修饰符(modifier)是以英文半角句号 '.' 指明的特殊后缀，(指令参数的后缀)，用于之处一个指令应该以特殊方式绑定。
                                    例如，  .prevent 修饰符告诉 v-on 指令，对于触发的事件调用 event.preventDefault()

                                            <form v-on:submit.prevent="onSubmit">...</form>
                               */

                               // 在下面的教程中你会看到 v-on 、v-for两个指令的其他修饰符。


                
                    // ★ 四、指令缩写

                              // ①、v-bind 缩写
                                        /*
                                                完整写法
                                                <a v-bind:href="url">...</a>

                                                缩写
                                                <a :href="url">...</a>

                                                动态参数缩写
                                                <a :[key]="url">...</a>
                                        */


                              // ②、v-on 缩写
                                        /*
                                                完整语法
                                                <a v-on:click="doSomething">...</a>

                                                缩写
                                                <a @click="doSomething">...</a>

                                                动态参数缩写
                                                <a @[event]="doSomething">...</a>
                                        */


                              /*
                                    它们看起来可能与普通的HMTL略有不同，单 ":" 与 "@" 对于 attribute 名称来说都是"合法字符"，
                                    在所有支持Vue的浏览器都能被正确地解析。
                                    而且，它们不会出现在最终渲染的标记中。
                                    缩写语法是完全可选的，但随着你更深入的了解它们的作用，你会庆幸拥有它们。
                              */

        </script>
    </body>
</html>